<template>
  <div>
    <!-- 搜索条件开始-->
    <div class="search">
      <el-row :gutter="20">
        <!-- 搜索条件开始 -->

        <el-col :span="18">
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            class="manager-search"
          >
            <!-- 替换内容块开始 -->
            <el-col :span="10">
              <el-form-item label="地址类型" prop="addressType">
                <el-select
                  v-model="queryParams.addressType"
                  placeholder="地址类型"
                  clearable
                >
                  <el-option label="离线地址" value="0" />
                  <el-option label="在线地址" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="名称" prop="address">
                <el-input
                  v-model="queryParams.address"
                  placeholder="请输入搜索内容"
                  @keyup.enter="handleQuery"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-show="false">
              <el-form-item label="父节点" prop="pid">
                <el-input v-model="queryParams.pid" clearable />
              </el-form-item>
            </el-col>
            <!-- 替换内容块结束 -->

            <el-col :span="1.5">
              <el-button type="primary" @click="handleQuery" size="mini">
                <i class="iconfont icon-chaxun btn-icon">查询</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="resetQuery" size="mini">
                <i class="iconfont icon-chongzhi btn-icon">重置</i>
              </el-button>
            </el-col>
          </el-form>
        </el-col>
        <!-- 搜索条件结束 -->

        <!-- 工具条开始 -->
        <el-col :span="6">
          <el-row :gutter="20" style="float: right">
            <el-col :span="1.5">
              <!-- 替换内容块开始 -->
              <el-button
                type="primary"
                @click="handleAdd"
                size="mini"
                plain
                v-if="getParams(value)"
              >
                <i class="iconfont icon-tianjia btn-icon">添加服务</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                :disabled="multiple"
                @click="handleDelete"
                size="mini"
                plain
                v-if="getParams(value)"
              >
                <i class="iconfont icon-shanchu btn-icon">删除</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                @click="handleExport"
                size="mini"
                plain
                v-if="getParams(value)"
              >
                <i class="iconfont icon-daochu btn-icon">导出</i>
              </el-button>
            </el-col>
            <!-- 替换内容块结束 -->
          </el-row>
        </el-col>
        <!-- 工具条结束 -->
      </el-row>
    </div>
    <!-- 搜索条件结束-->

    <!-- 主页面开始 -->
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- Tree控件开始 -->
        <el-col :span="3.5">
          <!-- <Tree @handle-node-click="handleNodeClick"/> -->
          <seniorTree
            @handle-node-click="handleNodeClick"
            title="地名地址目录"
          />
        </el-col>
        <!-- Tree控件结束 -->

        <!-- 表格开始 -->
        <el-col :span="14.5">
          <el-table
            :data="tableList"
            @selection-change="handleSelectionChange"
            v-loading="loading"
            class="menu-table"
            height="500"
          >
            <el-table-column type="selection" align="center" />
            <el-table-column label="ID" type="index" />
            <el-table-column
              label="地址"
              prop="address"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="地址类型" prop="addressType" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.addressType === '0' ? '' : 'success'"
                  disable-transitions
                  >{{
                    scope.row.addressType == "0" ? "离线地址" : "在线地址"
                  }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="坐标"
              prop="coordinate"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="图片url"
              prop="imageUrl"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="视频url"
              prop="videoUrl"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="备注"
              prop="memo"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="300"
            >
              <template #default="scope">
                <el-button
                  plain
                  size="mini"
                  type="primary"
                  @click="handleUpdate(scope.row)"
                  v-if="getParams(value)"
                >
                  <i class="iconfont icon-bianji btn-icon">编辑</i>
                </el-button>
                <el-button
                  plain
                  size="mini"
                  @click="handledetails(scope.row, 1)"
                >
                  <i class="iconfont icon-xiangqing btn-icon">详情</i>
                </el-button>
                <el-button
                  plain
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  v-if="getParams(value)"
                >
                  <i class="iconfont icon-shanchu btn-icon">删除</i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 表格结束 -->

        <el-col :span="5" class="mapImg">
          <div class="map-default-container">
            <img src="@/assets/images/map.png" alt />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 主页面结束 -->
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";

//分页
import Pagination from "@/components/Pagination/index.vue";
//引入tree组件
import Tree from "../tree/index.vue";
import seniorTree from "../tree/seniorTree.vue";
import { getShow } from "@/utils/auth";

export default {
  components: { Pagination, Tree, seniorTree },
  /**
   * 定义变量
   */
  data() {
    return {
      form: {}, //表单
      isShow: true, //控制按钮状态
      value: "", //获取路由携带参数
      loading: false, //加载状态
      multiple: false, //控制头部删除按钮状态
      tableList: [], //表格列表
      total: 0, //总条目数
      isType: "add", //定义表单弹框的类型
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10,
        addressType: "",
        address: "",
      },
      rules: {
        //表单验证
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  /**
   * 初始化函数
   */
  created() {
    //获取路由参数
    let params = this.$route.query;
    //动态获取路由参数的key值
    let keys = Object.values(params).join("");
    this.value = keys;
  },
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.getList();
  },
  /**
   * 方法
   */
  methods: {
    getParams(val) {
      return getShow(val);
    },
    /*
     * 表格多选框选中数据，按钮状态改变
     */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(node) {
      //设置PID值
      this.queryParams.pid = node.id;
      //获取列表数据
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    async getList() {
      //设置Loding状态
      this.loading = true;
      //调用列表查询接口
      api.manager.list(this.queryParams).then((res) => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.tableList = res.rows;
          //设置总条目数
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
        //loading结束
        this.loading = false;
      });
    },
    /**
     * 删除数据
     * @param {Object} node
     */
    handleDelete(node) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用删除接口
          api.manager
            .del(node.id)
            .then((res) => {
              //重新获取列表
              this.getList();
              //弹出提示
              ElMessage({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((err) => {
              ElMessage({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch((err) => {
          ElMessage({
            type: "error",
            message: "删除失败!",
          });
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      api.manager
        .ExportData()
        .then((res) => {
          const link = document.createElement("a");
          let blob = new Blob([res], {
            type: res.type,
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "统计数据");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          this.$message.error("导出失败");
        });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.$router.push({ path: "/formModal" });
    },
    /**
     * 编辑
     */
    handleUpdate(row) {
      this.isType = "edit"; //根据状态判断是否请求详情接口
      this.$router.push({
        path: "/formModal",
        query: { id: row.id, isType: this.isType },
      });
    },
    /**
     * 详情
     */
    handledetails(row, type) {
      this.isType = "details"; //根据状态判断是否请求详情接口
      this.$router.push({
        path: "/formModal",
        query: { type: type, id: row.id, isType: this.isType },
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
